{% stylesheet %}
.block_product_scroll .content:hover .list {
  animation-play-state: paused;
}

.block_product_scroll .content .list {
  will-change: transform;
  animation: marquee var(--speed) linear infinite;
}

.block_product_scroll .content {
  display: flex;
  gap: 10px;
  overflow: hidden;
  border-radius: var(--radius, 12px);
  box-shadow: var(--shadow, 0 1px 3px rgba(0,0,0,0.1));
  background-color: #ffffff;
}

.block_product_scroll .list {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.block_product_scroll .list_item {
  flex-shrink: 0;
  max-width: 475px;
}

.block_product_scroll .list_item .item_link {
  display: flex;
  gap: 10px;
  align-items: center;
}

.block_product_scroll .img_box {
  flex-shrink: 0;
  width: var(--img-mb-size);
  height: var(--img-mb-size);
}

@media (min-width: 768px) {
  .block_product_scroll .img_box {
    width: var(--img-pc-size);
    height: var(--img-pc-size);
  }
}

.block_product_scroll .img_box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.block_product_scroll .text {
  flex: 1;
}

.block_product_scroll .text_title {
  font-size: var(--general_font_size);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.block_product_scroll .price {
  margin-top: 4px;
}

.general-price {
  color: #111;
  font-weight: bold;
  font-size: 16px;
}

.general-oldprice {
  margin-left: 8px;
  text-decoration: line-through;
  color: #999;
  font-size: 14px;
}

@keyframes marquee {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}
{% endstylesheet %}

{% assign data = section.settings %}
{%- capture container -%}
  {%- if data.is_fill -%}
    full_container_wrapper
  {%- else -%}
    container_wrapper
  {%- endif -%}
{%- endcapture -%}

{% assign blockId = block_id | default : section.block_id %}

{% if data.collection.id %}
    {% get_collection collections_id={section.settings.collection.id} %}
    {% assign collection = collection %}
{% endif %}

{% get_products collection_id={section.settings.collection.id} limit={ data.product_number } %}

<div class="block_product_scroll">
  <div class="{{ container }}">
    <div class="content" style="--speed: {{ data.speed }}s;--img-pc-size:{{data.img_pc_size | default: 192 }}px;--img-mb-size:{{data.img_mb_size | default: 128 }}px">
      {% for i in (1..3) %}
        <ul class="list">
          {% if products.size > 0 %}
            {% for product in products %}
              {%- capture product_handle -%}
              {% if product.handle and product.handle != "" %}
                {%- if storeConfig.collection_product_url == 1 -%}
                /products/{{ product.handle }}?data_from={{product.data_from | default:data_from}}
                {%- else -%}
                {%- if collection_handle and collection_handle != "" -%}/collections/{{collection_handle}}{% endif %}/products/{{ product.handle }}?data_from={{product.data_from | default:data_from}}
                {%- endif -%}
              {% else %}
                javascript:;
              {%- endif -%}
              {%- endcapture -%}

              {%- if product.image.alt == "" -%}
                {% assign product_alt = product | image_alt:'product' %}
              {%- else -%}
                {% assign product_alt = product.image.alt %}
              {%- endif -%}

              <li class="list_item">
                <a href="{{ product_handle }}" class="item_link">
                  <div class="img_box">
                    {% include 'lazy_img',src: product.src,alt: product_alt,class: '' %}
                  </div>
                  <div class="text">
                    <h2 class="text_title">{{ product.highlight_title | default : product.title | default:"Title" }}</h2>
                    <div class="price">
                      {% if product.variant.price < 0 %}
                        <span class="general-price">{{ "88.88" | money }}</span>
                      {% else %}
                        <span class="general-price">{{ product.variant.price | money }}</span>
                      {% endif %}
                      {% if product.variant.compare_at_price != "0" and product.variant.price < product.variant.compare_at_price %}
                        <span class="general-oldprice">{{ product.variant.compare_at_price | default : "88.88" | money }}</span>
                      {% endif %}
                    </div>
                  </div>
                </a>
              </li>
            {% endfor %}
          {% else %}
            {% for i in (1..6) %}
              <li class="list_item">
                <a href="javascript:;" class="item_link">
                  <div class="img_box">
                    {% include 'lazy_img',src: '',alt: '',class: '' %}
                  </div>
                  <div class="text">
                    <h2 class="text_title">Electric scooter RS PRO</h2>
                    <div class="price">
                      <span class="general-price">{{ "88.88" | money }}</span>
                    </div>
                  </div>
                </a>
              </li>
            {% endfor %}
          {% endif %}
        </ul>
      {% endfor %}
    </div>
  </div>
</div>

{% schema %}
{
  "class": "block_product_scroll",
  "is_global": false,
  "icon": "icon-lunbotu",
  "name": {
    "zh_CN": "商品滚动",
    "en_US": "Product Scroll"
  },
  "max_blocks": 0,
  "blocks": [],
  "settings": [
    {
      "type": "card_header",
      "label": {
        "zh_CN": "设置"
      }
    },
    {
      "type": "card_switch",
      "label": {
        "zh_CN": "宽度铺满",
        "en_US": "Spread the width"
      },
      "id": "is_fill",
      "default": "false"
    },
    {
      "type": "card_collection",
      "label": {
        "zh_CN": "选择专辑",
        "en_US": "Select collection"
      },
      "default": {
        "id": "",
        "title": ""
      },
      "id": "collection"
    },
    {
      "type": "card_input_number",
      "label": {
        "zh_CN": "产品总数量",
        "en_US": "Total quantity of products"
      },
      "max": 1000,
      "min": 1,
      "id": "product_number",
      "default": 8
    },
    {
      "type": "card_slider",
      "label": {
        "zh_CN": "PC端图片大小",
        "en_US": "PC image size"
      },
      "id": "img_pc_size",
      "max": 500,
      "min": 100,
      "unit": "px",
      "default": 192
    },
    {
      "type": "card_slider",
      "label": {
        "zh_CN": "移动端图片大小",
        "en_US": "Mobile image size"
      },
      "id": "img_mb_size",
      "max": 300,
      "min": 0,
      "unit": "px",
      "default": 128
    },
    {
      "type": "card_slider",
      "label": {
        "zh_CN": "滚动速度",
        "en_US": "Scroll speed"
      },
      "id": "speed",
      "max": 60,
      "min": 1,
      "unit": "s",
      "default": 4
    }
  ],
  "default": {
    "settings": {
      "is_fill": false,
      "img_pc_size":192,
      "img_mb_size":128,
      "collection": {
        "id": "",
        "title": ""
      },
      "product_number": 4,
      "speed": 30
    },
    "blocks": []
  }
}
{% endschema %}
